<template>
    <div>
        <el-form
            :model="entity"
            :rules="rules"
            ref="form"
            label-width="120px"
            class="dialog-form"
        >
            <el-row>
                <el-col :span="8">
                    <el-radio-group
                        style="width: 200px; margin-left: 56px; margin-top: -10px"
                        v-model="entity.queryMode"
                    >
                        <el-radio :label="10">部门</el-radio>
                        <el-radio :label="20">员工</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="16">
                    <department-select
                        style="width: 260px; margin-left: -114px"
                        v-model="entity.departmentId"
                        :clearable="false"
                    ></department-select>
                </el-col>
                <el-col :span="8">
                    <!--<el-input v-if="cls==20" style="width:289px;margin-left: -114px;margin-top: 10px " placeholder='员工' v-model='entity.employee.name'>                 </el-input>-->
                    <employee-select
                        ref="employee-select"
                        :disabled="entity.queryMode != 20"
                        :fnChange="search"
                        v-model="entity.employeeId"
                        style="width: 260px; margin-left: -114px; margin-top: 10px"
                        :departmentId="entity.departmentId"
                        :clearable="true"
                    ></employee-select>
                </el-col>
            </el-row>

            <el-row>
                <el-form-item label="周期" prop="periodId">
                    <period-select style="width: 180px"
                                   :fnChange="buildDataRanges"
                                   ref="periodSelect"
                                   v-model="entity.periodId"
                                   :clearable="true"
                    ></period-select>
                </el-form-item>
            </el-row>
            <el-row :span="12">
                <el-col :span="12">
                    <el-form-item label="日期">
                        <el-date-picker
                            style="width: 260px"
                            v-model="entity.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label=" ">
                        <el-checkbox style="margin-left: 1px" v-model="entity.noholiday">不排节日、周休日
                        </el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item style="color: red" label="">
                        <el-button type="primary"
                                   plain @click="deleteByRange">
                            <span style="color: red"> 删除班次 </span>
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item
                        style="width: 100%; margin-top: 1px"
                        label="班次1周期:天"
                        prop="days1">
                        <el-input placeholder="连班天数，包括休息" v-model="entity.classMaster1.days">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        style="width: 100%; margin-top: 1px"
                        label="班次"
                        prop="classMasterId1">
                        <el-button style="width: 100%"
                                   type="primary" plain
                                   @click="findClass(1)">
                            {{
                                entity.classMaster1.name ? entity.classMaster1.name : "请选择班次"
                            }}
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item style="width: 100%" label="班次2周期:天" prop="days2">
                        <el-input
                            placeholder="连班天数，包括休息"
                            v-model="entity.classMaster2.days">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item style="width: 100%" label="班次" prop="classMasterId2">
                        <el-button
                            :disabled="entity.classMaster2.days < 1" style="width: 100%"
                            type="primary"
                            plain @click="findClass(2)">
                            {{
                                entity.classMaster2.name
                                    ? entity.classMaster2.name
                                    : "请选择班次"
                            }}
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item style="width: 100%" label="班次3周期:天" prop="days3">
                        <el-input
                            placeholder="连班天数，包括休息"
                            v-model="entity.classMaster3.days">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item style="width: 100%" label="班次" prop="classMasterId3">
                        <el-button
                            :disabled="entity.classMaster3.days < 1"
                            style="width: 100%" type="primary"
                            plain @click="findClass(3)">
                            {{
                                entity.classMaster3.name
                                    ? entity.classMaster3.name
                                    : "请选择班次"
                            }}
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <v-dialog ref="formDiag" :appendToBody="true" title="查找" :width="'48%'">
            <class-master-find
                v-model="entity.classMasterId"
                :classNumber="classNumber"
                :confirmFind="confirmFind"
                :cancelFind="cancelFind"
            >
                <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
                <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
            </class-master-find>
        </v-dialog>
    </div>
</template>
<style lang="less" scoped>
.merchantLogo .el-upload-dragger {
    img {
        height: 200px !important;
    }
}

.dialog-form {
    .el-radio-group {
        .el-radio {
            display: flex;
            align-items: center;
        }

        label {
            height: 40px;
        }

        .group-text {
            display: inline-block;
            width: 100px;
        }

        .title-text {
            display: inline-block;
            width: 120px;
        }
    }
}
</style>

<script>
const defaultEntity = {
    classCount: 1,
    queryMode: 10, //department
    departmentId: null, // 部门标识

    dateRange: [],
    employeeId: null, //  员工标识
    employee: {name: ""},

    noholiday: true,

    classMaster1: {
        classMasterId: -1,
        name: "请选择班次",
        days: 1,
    },
    classMaster2: {
        classMasterId: -1,
        name,
        days: 0,
    },
    classMaster3: {
        classMasterId: -1,
        name: "请选择班次",
        days: 0,
    },
};
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";
import ClassMasterFind from "@/components/widgets/attend/ClassMasterMultiSelect.vue";
import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";

export default {
    components: {PeriodSelect, EmployeeSelect, DepartmentSelect, ClassMasterFind},
    data() {
        return {
            cls: 10,
            classNumber: 1,
            parentId: 0,
            ruleTpl: {when: null, then: null},
            entity: _.cloneDeep(defaultEntity),
            dateRange: [],
            oldProps: [],
            ruleDefs: [],
            isDisabled: false,
            limitTotal: false,
            rules: {
                custNo: [
                    {required: true, message: "编号不能为空", trigger: "blur"},
                    {
                        min: 1,
                        max: 6,
                        message: "长度在 1 到 6 个字符",
                        trigger: "blur",
                    },
                ],

                startOn: [
                    {
                        required: true,
                        message: "请选择开始时间",
                        trigger: "blur",
                    },
                ],
                merchantId: [
                    {
                        type: "number",
                    },
                ],
                status: [
                    {
                        type: "number",
                        required: true,
                        message: "请选择状态",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        buildDataRanges() {
            if (this.entity.periodId) {
                this.$api.attend.attend.PeriodService.findById(this.entity.periodId).then(
                    (r) => {
                        if (r.data != null) {
                            this.entity.dateRange = [r.data.startDay, r.data.endDay];
                            return;
                        }
                    }
                );
            }
        },
        search() {
        },

        findClass(classNumber) {
            this.classNumber = classNumber;
            this.$refs.formDiag.show();
        },
        confirmFind(row) {
            this.$refs.formDiag.hide();
            var classMaster = row;
            // this.$api.attend.attend.ClassMasterService.findById(row.classMasterId).then(rsp => {

            // })
            console.log("classMaster:");
            console.log(JSON.stringify(classMaster));
            this.entity.classCount = 3;
            if (this.classNumber === 1) {
                this.entity.classMaster1.classMasterId = classMaster.classMasterId;
                this.entity.classMaster1.name = classMaster.name;
            }
            if (this.classNumber === 2) {
                this.entity.classMaster2.classMasterId = classMaster.classMasterId;
                this.entity.classMaster2.name = classMaster.name;
            }
            if (this.classNumber === 3) {
                this.entity.classMaster3.classMasterId = classMaster.classMasterId;
                this.entity.classMaster3.name = classMaster.name;
            }
            console.log("entity:");
            console.log(JSON.stringify(this.entity));
        },
        cancelFind() {
            this.$refs.formDiag.hide();
        },
        getProps(scope) {
            return this.entity.props.filter((p) => p.propScope == scope);
        },
        onRuleDefsLoaded(opts) {
            this.ruleDefs = opts || [];
            this.resetProps();
        },
        onDiscountTypeChange(val) {
        },
        resetProps() {
        },
        setValues(vals) {
            this.resetEntity = _.cloneDeep(vals);
            this.entity = _.cloneDeep(this.resetEntity);
        },
        //根据部门，日期范围删除
        deleteByRange() {
            this.$confirm("确定删除排班吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.attend.attend.EmployeeClassService.deleteByRange(this.entity).then(
                    (rsp) => {
                        this.$msgJsonResult(rsp);
                    }
                );
            });
        },
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.entity);
                    //排班
                    this.$api.attend.attend.EmployeeClassService.schedule(this.entity).then(
                        (rsp) => {
                            this.$msgJsonResult(rsp);
                            if (rsp.code === 200) {
                                this.$emit("saved", rsp);
                            }
                        }
                    );
                }
            });
        },
        resetForm() {
            //this.$refs["form"].resetFields();
            this.entity = _.cloneDeep(defaultEntity);
            this.entity.dateRange = [
                this.$dongxwDict.formatDateZero(new Date()),
                this.$dongxwDict.formatDateZero(new Date()),
            ];
        },

        init(options) {
            this.resetForm();

            if (options.employeeClassId) {
                this.$api.attend.attend.EmployeeClassService.findById(
                    options.employeeClassId
                ).then((r) => {
                    this.entity = r.data;
                });
            } else {
                if (options.departmentId) {
                    this.entity.departmentId = options.departmentId;
                }
                this.isDisabled = false;
            }
        },
    },
    mounted() {
        this.$on("init", this.init);
        this.$on("submit", this.submitForm);
    },
};
</script>
